<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>06盒子的水平布局</title>
    <style>
        .outer{
            width: 800px;
            height: 200px;
            border: 10px red solid;
        }
        .inner{
            width: 200px;
            height: 200px;
            background-color: #bfa;
            /* 
            元素在其父元素中水平方向的位置由以下几个属性共同决定：
                margin-left
                border-left
                padding-left
                width
                padding-right
                border-right
                margin-right
                一个元素在其父元素中，水平布局必须满足以下等式：
margin-left+border-left+padding-left+width+padding-right+border-right+margin-right=父元素内容区宽度
0+0+200+0+0+0=800    虽然默认是0，但是当等式不成立时（过度约束时），等式会自动调整
                调整的情况：
                    -如果这七个值中没有为auto的情况，则历览器自动调整margin-right使等式成立
                    -如果有auto的值，则会自动调整auto的值使等式成立
                    可以设置为auto的：
                        width:auto;
                        margin-left:auto;
                        margin-right:auto;
                    如果一（二）个外边距和一个宽度设置为auto，宽度会自动调整到最大，外边距自动调整到0
                    如果只设置两个外边距为auto，则自动调整时，平分值
*/
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>
</html>